<template>
  <view class="p-30" style="height: calc(100vh - var(--top-window-height));">
    <scroll-view class="bgc-primary br-12" style="max-height: 100%; border-right: 3px solid #0c1322;" scroll-y>
      <uni-collapse :accordion="true">
        <uni-collapse-item v-for="(menu, menuIndex) in menuItems" :key="menuIndex" :disabled="menu.disabled"
          titleBorder="none" :showArrow="!!menu.children" :open="!!menu.open">
          <template v-slot:title>
            <label @click="onClickItems({ menuIndex })" class="height-110" :style="{
              padding: `0 20px`,
              filter: menu.disabled ? `opacity(60%)` : 'unset',
            }">
              <uni-icons :type="menu.icon" :color="$route!.path.includes(menu.dir) ? '#0892f5' : '#fff'" size="18" />
              <text :class="[
                `ml-10 fs-28`,
                `color-${$route!.path.includes(menu.dir) ? 'primary' : 'inverse'}`,
              ]">
                {{ menu.title }}
              </text>
            </label>
          </template>
          <label v-for="(item, itemIndex) in menu.children" :key="itemIndex"
            @click="onClickItems({ menuIndex, itemIndex })" class="height-110 bgc-3"
            :style="{ padding: `0 20px 0 36px` }">
            <uni-icons :type="item.icon" :color="$route!.path === item.url ? '#007aff' : '#333'" size="15" />
            <text :class="[
              `ml-10 fs-28`,
              `color-${$route!.path === item.url ? '2' : '4'}`,
            ]">
              {{ item.title }}
            </text>
          </label>
        </uni-collapse-item>
      </uni-collapse>
    </scroll-view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data: () => ({
    menuItems: [
      {
        icon: "bars",
        dir: "/pages/admin/project",
        path: "/index",
        title: "项目"
      },
      {
        icon: "bars",
        dir: "/pages/admin/robot",
        path: "/index",
        title: "流动性管理"
      },
      {
        icon: "bars",
        dir: "/pages/admin/trade",
        path: "/index",
        title: "交易"
      }
    ] as any[],
  }),
  methods: {
    onClickItems({ menuIndex, itemIndex }: { menuIndex: number; itemIndex?: number; }) {
      const menu = this.menuItems[menuIndex];
      if (itemIndex === undefined) {
        let url = menu.dir + menu.path;
        url !== this.$route!.path && uni.redirectTo({ url, success: () => uni.hideLeftWindow({}) });
        return;
      };
      const item = menu.children[itemIndex];
      let url = item.dir + item.path;
      url !== this.$route!.path && uni.redirectTo({ url: item.dir + item.path, success: () => uni.hideLeftWindow({}) });
    },
  },
});
</script>

<style lang="scss" scoped>
// scss
::v-deep {

  &.uni-collapse-item__wrap,

  &.uni-collapse {
    background-color: unset;
  }

  &.uni-collapse-item__wrap-content.uni-collapse-item--border {
    border-bottom-color: transparent;
  }
}
</style>